<!-- 分类侧边栏 -->
<div id="category-sidebar" class="w-full h-full rounded-lg bg-white flex-shrink-0 border border-gray-200 overflow-hidden relative">
    <!-- 分类标题 -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-500 px-6 py-3.5">
        <div class="flex items-center justify-between">
            <h2 class="text-[14px] font-medium text-white">商品分类</h2>
        </div>
    </div>
    
    <!-- 分类列表 -->
    <div class="h-full p-2">
        <ul class="space-y-0.5">
            <% 
            const icons = [
                'https://img.icons8.com/pastel-glyph/64/stethoscope.png',        // 听诊器
                'https://img.icons8.com/pastel-glyph/64/dna-helix.png',          // DNA
                'https://img.icons8.com/pastel-glyph/64/medical-mobile-app.png',  // 医疗app
                'https://img.icons8.com/pastel-glyph/64/hospital.png',           // 医院
                'https://img.icons8.com/pastel-glyph/64/microscope.png',         // 显微镜
                'https://img.icons8.com/pastel-glyph/64/syringe.png',           // 注射器
                'https://img.icons8.com/pastel-glyph/64/ambulance.png',         // 救护车
                'https://img.icons8.com/pastel-glyph/64/medical-doctor.png',    // 医生
                'https://img.icons8.com/pastel-glyph/64/pills--v1.png',          // 药丸
                'https://img.icons8.com/pastel-glyph/64/pharmacy-shop.png'      // 药店
            ];
            // 过滤出一级分类（parentId为null或0的分类）
            const parentCategories = categories.filter(cat => !cat.parentId);
            parentCategories.forEach(function(category, index) { 
                const randomIcon = icons[index % icons.length];
                // 获取该分类的子分类
                const children = categories.filter(child => child.parentId === category.id);
            %>
                <li class="category-item group">
                    <a href="/category/<%= category.id %>" 
                       class="flex items-center justify-between px-4 py-2.5 rounded-lg hover:bg-gray-50 transition-all duration-200">
                        <div class="flex items-center space-x-3">
                            <div class="w-[28px] h-[28px] flex items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white group-hover:shadow-sm transition-all duration-200">
                                <img src="<%= randomIcon %>" alt="" class="w-5 h-5 opacity-50 group-hover:opacity-100 transition-all duration-200" />
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="text-[14px] text-gray-700 group-hover:text-blue-600 font-medium transition-colors duration-200">
                                    <%= category.name %>
                                </span>
                                <% if (category.createTime && Date.now() - new Date(category.createTime).getTime() < 7 * 24 * 60 * 60 * 1000) { %>
                                    <span class="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded font-medium">
                                        NEW
                                    </span>
                                <% } %>
                                <% if (category.orderNum) { %>
                                    <span class="text-[12px] text-gray-400">
                                        <%= category.orderNum %>
                                    </span>
                                <% } %>
                            </div>
                        </div>
                        <% if (children && children.length > 0) { %>
                            <i class="fas fa-chevron-right text-[12px] text-gray-400 group-hover:text-blue-600 transform group-hover:translate-x-0.5 transition-all duration-200"></i>
                        <% } %>
                    </a>

                    <!-- 二级菜单 -->
                    <% if (children && children.length > 0) { %>
                        <div class="submenu fixed left-[265px] top-0 w-[600px] h-[<%= bannerHeight %>px] bg-white border-r border-gray-100 shadow-lg
                                  opacity-0 invisible group-hover:opacity-100 group-hover:visible rounded-lg
                                  transition-all duration-200 z-50">
                            <div class="h-full flex flex-col">
                                <!-- 二级菜单头部 -->
                                <div class="bg-gradient-to-r from-blue-600/5 to-blue-500/5 px-6 py-3.5 border-b border-gray-100">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-[28px] h-[28px] flex items-center justify-center rounded-lg bg-blue-500/10">
                                            <img src="<%= randomIcon %>" alt="" class="w-5 h-5" />
                                        </div>
                                        <h3 class="text-[15px] font-medium text-gray-800">
                                            <%= category.name %>
                                        </h3>
                                    </div>
                                </div>
                                
                                <!-- 二级菜单内容 -->
                                <div class="flex-1 p-4 overflow-auto">
                                    <div class="grid grid-cols-2 gap-4">
                                        <% children.forEach(function(subCategory) { %>
                                            <div class="group/item">
                                                <a href="/category/<%= category.id %>/<%= subCategory.id %>" 
                                                   class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-50/80 transition-all duration-200">
                                                    <div class="w-[36px] h-[36px] flex items-center justify-center rounded-lg bg-gray-50 group-hover/item:bg-white group-hover/item:shadow-sm transition-all duration-200">
                                                        <img src="<%= randomIcon %>" alt="" class="w-6 h-6 opacity-50 group-hover/item:opacity-100 transition-all duration-200" />
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="flex items-center space-x-2">
                                                            <span class="text-[14px] text-gray-700 group-hover/item:text-blue-600 font-medium transition-colors duration-200">
                                                                <%= subCategory.name %>
                                                            </span>
                                                            <% if (subCategory.createTime && Date.now() - new Date(subCategory.createTime).getTime() < 7 * 24 * 60 * 60 * 1000) { %>
                                                                <span class="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded font-medium">
                                                                    NEW
                                                                </span>
                                                            <% } %>
                                                        </div>
                                                        <% if (subCategory.orderNum) { %>
                                                            <div class="text-[12px] text-gray-400 mt-0.5">
                                                                序号: <%= subCategory.orderNum %>
                                                            </div>
                                                        <% } %>
                                                    </div>
                                                    <i class="fas fa-chevron-right text-[12px] text-gray-300 group-hover/item:text-blue-600 transform group-hover/item:translate-x-0.5 transition-all duration-200 opacity-0 group-hover/item:opacity-100"></i>
                                                </a>
                                            </div>
                                        <% }); %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <% } %>
                </li>
            <% }); %>
        </ul>
    </div>
</div>

<style>
/* 重置默认样式 */
#category-sidebar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 确保子菜单高度与父级一致 */
.submenu {
    top: 150px;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.98);
}

/* 优化滚动条样式 */
.submenu {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, 0.8) transparent;
}

.submenu::-webkit-scrollbar {
    width: 4px;
}

.submenu::-webkit-scrollbar-track {
    background: transparent;
}

.submenu::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.8);
    border-radius: 4px;
}

.submenu::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.8);
}

/* 优化hover状态 */
.category-item:hover .submenu {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* 添加过渡效果 */
.category-item a,
.submenu {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 优化子分类布局 */
.submenu .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
</style>
